<template>
  <div catchtouchmove="true" class="container-headnav">
    <div
      class="top-nav"
      :style="{
        height: statusBarHeight + 'px',
        backgroundColor: appInfo.titleBackgroundColor,
        color: appInfo.titleFontColor
      }">
      <div
        class="top-name-bar v-align-c"
        :class="{
          'flex-center': appInfo.titleCenter === 10,
          'flex text-align-l': appInfo.titleCenter === 11,
        }"
        :style="{
          'padding-top': statusBarTop + 'px',
          'height': barHeight + 'px',
          'background': appInfo.titleBackgroundColor, 'color': appInfo.titleFontColor
        }">
        <div
          :class="{
            'flex-center flex':appInfo.titleCenter === 10,
            'flex v-align-c':appInfo.titleCenter === 11
          }">
          <img
            class="mar-r-8 mar-l-8"
            :style="{
              'width': appInfo.iconWidth + 'px',
              'height': appInfo.iconHeight + 'px'
            }"
            v-if="appInfo.iconUrl"
            :src="appInfo.iconUrl"/>
          <label class="top-txt">{{ appInfo.mpPageTitle }}</label>
        </div>
      </div>
    </div>
    <div class="top-space" :style="'height: '+ statusBarHeight +'px'"></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        typeText: '',
        barHeight: 0,
        shopHeight: 0,
        statusBarHeight: 0,
        spaceBarHeight: 0,
        statusBarTop: 0,
        personalTop: 0,
        appInfo: {}
      }
    },
    watch: {
      dataInfo: {
        deep: true,
        immediate: false,
        handler(newVal) {
          this.dataEls()
        }
      }
    },
    props: {
      dataInfo: {
        type: Object,
        default: {}
      },
      showBackBtn: {
        type: Boolean,
        default: false
      }
    },
    onLoad() {
      this.statusBarHeight = this.$pt.getSystemInfoSync()['statusBarHeight'] + 44
      this.barHeight = this.statusBarHeight - 2
      // 店铺信息栏
      this.statusBarTop = this.statusBarHeight - 42
      this.searchTop = this.statusBarHeight - 74
      let sysInfo = ''
      sysInfo = this.$pt.getSystemInfoSync()
      this.wxMenuButtonH = this.$pt.getMenuButtonBoundingClientRect().height - 1
      if (sysInfo.system.indexOf('iOS') === -1) {
        // android类型
        this.statusBarTop = this.statusBarHeight - 40
        this.searchTop = this.statusBarHeight - 80
        this.barHeight = this.statusBarHeight - 4
      }
      // this.appInfo = this.$pt.getStorageSync('appInfo')
      this.$emit('headerNavHeight', this.statusBarHeight)
    },
    onShow() {
    },
    mounted() {
    },
    methods: {
      dataEls() {
        if (this.$pt.getStorageSync('appInfo')) {
          this.appInfo = this.$pt.getStorageSync('appInfo')
        } else {
          this.appInfo = this.$utils.deepClone(this.dataInfo)
        }
      },
      searchPage() {
        if (!this.getShowBuyCard) return
        this.$pt.navigateTo({url: '/pages/shop/searchView/main'})
      },
      taHome() {
        if (!this.getMemberId) return
        this.$pt.navigateTo({url: '/pages/home/member-info/main?friendId=' + this.getMemberId + '&urlFrom=inSide'})
      },
      topBack() {
        this.$pt.navigateBack({ delta: -1 })
      },
      toHome() {
        this.$pt.reLaunch({ url: '/pages/home/main' })
      },
      changeShop() {
        if (!this.getShowBuyCard) return
        this.$pt.navigateTo({url: '/pages/change-shop/main'})
      }
    }
  }
</script>

<style lang="less" scoped>
  // 顶部导航样式定义
  .search-anchor-bar{
    background: #efefef;
    color: #666;
    border-radius: 100px;
    font-size: 12px;
    height: 32px;
  }
  .top-name-bar{
    box-sizing: border-box;
    overflow: hidden;
  }
  .user-bar{
    background: #fff;
    .avatar{
      width: 27px;
      height: 27px;
      border-radius: 50px;
      margin-right: 8px;
    }
    .icon-v{
      position: absolute;
      right: 4px;
      bottom: 0;
      width: 13px;
      height: 13px;
    }
    .dark-gray{
      color: #595959;
    }
  }
  .search-ri{
    background: #f5f5f5;
    color: #999;
    border-radius: 50px;
  }
  .back-btn{
    position: fixed;
    left: 5px;
    top: 28px;
    width: 40px;
    height: 40px;
    z-index: 101;
    .back-align{
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .iconfont{      
      font-size: 20px;
      font-weight: bold;
      transform:rotate(-180deg);
    }
  }
  .top-pro-name{
    position: fixed;
    left: 8px;
    top: 28px;
    z-index: 101;
  }
  .top-back{
    position: fixed;
    left: 0px;
    top: 28px;
    z-index: 101;
    padding: 8px 10px 8px 7px;
    .iconfont{      
      font-size: 20px;
      font-weight: bold;
      transform:rotate(180deg);
    }
  }
  .top-nav{
    overflow: hidden;
    box-sizing: border-box;
    text-align: center;
    font-size: 15px;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
    .top-txt{
      font-size: 15px;      
      .txt-min{
        max-width: 90px;
        height: 24px;
        line-height: 1.3;
        overflow:hidden;
        text-overflow:ellipsis;
        display:-webkit-box;
        -webkit-line-clamp:1;
        -webkit-box-orient:vertical;
        word-break:break-word;
      }
    }
    .iconfont{
      margin-top: 3px;
      margin-left: 3px;
      font-size: 15px;
      transform:rotate(90deg);
      &.icon-next{
        margin-top: 0px;
        margin-left: 3px;
        font-size: 15px;
        transform:rotate(0deg);
        color: #292929;
      }
    }
  }
  .top-space{
    height: 64px;
  }
</style>
